﻿<!DOCTYPE html>
<!--<html>-->
<html class="has">
<!--<html class="no">-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection" />
	<meta content="emai=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../css/form.css" />
	<title>搜索报告</title>
	<style>
		html {
			background-color: #f4f4f4;
		}

			html.has {
				background-color: #fff;
			}

		.wrapper > div, .no .notice, .has .notice {
			display: none;
		}

			.wrapper > div img {
				max-width: 500px;
			}

		html .notice, .has #result, .no .no-result {
			display: block;
		}

		form {
			background-color: #f8f8f8;
			border-bottom: 1px solid #e2e2e2;
			position: relative;
			margin-top: 0;
			padding: 25px 0;
		}

			form input[type="tel"], form input[type="text"] {
				-moz-border-radius: 100px;
				-webkit-border-radius: 100px;
				border-radius: 100px;
				display: block;
				font-size: 1.7rem;
				height: 55px;
				margin: 0 auto;
				max-width: 635px;
				padding: 0 20px;
				width: 85%;
			}

			form input[type="tel"] {
				margin-bottom: 10px;
			}

			form button[type="submit"] {
				margin-top: 25px;
				max-width: 450px;
				width: 60%;
			}

		.no-result {
			padding: 0;
		}

		.notice {
			padding: 0;
			margin-top: 15%;
			text-align: center;
		}

			.notice img {
				width: 18.3%;
			}

		#result {
			border-top: 15px solid #f4f4f4;
		}

			#result header {
				background: transparent url('../img/icon_report.png') no-repeat 4% center;
				background-size:auto 46%;
				border-bottom: 1px solid #e2e2e2;
				color:#999;
				font-size:1.6rem;
				padding-left:10%;
			}

			#result ul {
				margin-left: 7.5%;
				width: 92.5%;
			}

			#result li {
				border-bottom: 1px solid #e2e2e2;
				font-size: 1.7rem;
				line-height: 1.5;
				padding: 15px 5px 15px 2.5%;
			}

			#result .i-viewAll {
				float: right;
				height: 21px;
			}
	</style>
</head>
<body>
	<div class="wrapper">
		<form action="search.html">
			<input type="tel" id="form-telephone" name="telephone" value="" placeholder="购买人手机号" data-message="购买人手机号不能为空" />
			<input type="text" id="form-name" name="name" value="" placeholder="受检人姓名" data-message="受检人姓名不能为空" />
			<button type="submit">点击搜索</button>
		</form>
		<!--还未搜索时：-->
		<div class="notice">
			<img src="../img/search_notice.png" />
		</div>
		<!--当没有查询到内容时：-->
		<div class="no-result">
			<img src="../img/no_result.png" />
		</div>
		<!--当查询到内容时：-->
		<div id="result">
			<header>以下是搜索结果：</header>
			<ul>
				<li data-href="#"><span class="icon i-viewAll"></span>产品名字1</li>
				<li data-href="#"><span class="icon i-viewAll"></span>产品名字2</li>
			</ul>
		</div>
	</div>
	<script src="../js/zepto-1.1.6.js" type="text/javascript"></script>
	<script src="../js/common.js" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script>
		Zepto(function ($) {
			baiaimama.validated = true;
			$("button[type='submit']").click(function (e) {
				baiaimama.validated = true;
				e.preventDefault();
				validateInput("form-telephone");
				validatePhone("form-telephone");
				validateInput("form-name");
				if (baiaimama.validated) {
					$("form").submit();
				}
			});
		});
	</script>
</body>
</html>
